<!DOCTYPE HTML>
<html>
<head>
<!--jQuery dependencies-->
    <link rel="stylesheet" href="../../pqgrid/css/jquery-ui-base-1.9.1.css" />
    <script src="../../pqgrid/js/jquery-1.9.1.min.js"></script>    
    <script src="../../pqgrid/js/jquery-ui-1.9.2.min.js"></script>
<!--PQ Grid files-->
    <link rel="stylesheet" href="../../pqgrid/pqgrid.min.css" />
    <script src="../../pqgrid/pqgrid.min.js"></script>
<!--PQ Grid Office theme-->
    <link rel="stylesheet" href="../../pqgrid/themes/office/pqgrid.css" />

    <style type="text/css">
    div.pq-toolbar *
	{
	    margin:auto 3px;
	}
	div.pq-toolbar textarea
	{
	    padding:3px;
	}
	</style>

<script>
    $(function () {
        function commentRender(ui) {
            var rowIndx = ui.rowIndx,
                dataIndx = ui.dataIndx,
                cellData = ui.cellData;
            if ($(this).pqGrid('attr', { rowIndx: rowIndx, dataIndx: dataIndx, attr: 'title' }).attr) {
                var pos = "bottom:0;right:0;";
                if (ui.column.align == 'right') {
                    pos = "top:0;left:0;";
                }
                return "<div style='position:relative;'>" +
                    cellData +
                    "<span style='position:absolute;height:14px;width:14px;" + pos + "' class='ui-icon ui-icon-comment' ></span>" +
                    "</div>";
            }
            else {
                return cellData;
            }
        };
        var data = [
            { rank: 1, company: 'Exxon Mobil', revenues: '339,938.0', profits: '36,130.0', 
                pq_cellattr: { company: { title: 'comments for Exxon Mobil'}} },
            { rank: 2, company: 'Wal-Mart Stores', revenues: '315,654.0', profits: '11,231.0' },
		    { rank: 3, company: 'Royal Dutch Shell', revenues: '306,731.0', profits: '25,311.0' },
		    { rank: 4, company: 'BP', revenues: '267,600.0', profits: '22,341.0'},            
		    { rank: 5, company: 'General Motors', revenues: '192,604.0', profits: '-10,567.0' },
		    { rank: 6, company: 'Chevron', revenues: '189,481.0', profits: '14,099.0' },
		    { rank: 7, company: 'DaimlerChrysler', revenues: '186,106.3', profits: '3,536.3' },
		    { rank: 8, company: 'Toyota Motor', revenues: '185,805.0', profits: '12,119.6', 
                pq_cellattr: { company: { title: 'comments for Toyota Motors'}} },
		    { rank: 9, company: 'Ford Motor', revenues: '177,210.0', profits: '2,024.0' },
		    { rank: 10, company: 'ConocoPhillips', revenues: '166,683.0', profits: '13,529.0' },
		    { rank: 11, company: 'General Electric', revenues: '157,153.0', profits: '16,353.0' },
		    { rank: 12, company: 'Total', revenues: '152,360.7', profits: '15,250.0' },
		    { rank: 13, company: 'ING Group', revenues: '138,235.3', profits: '8,958.9' },
		    { rank: 14, company: 'Citigroup', revenues: '131,045.0', profits: '24,589.0' },
		    { rank: 15, company: 'AXA', revenues: '129,839.2', profits: '5,186.5' },
		    { rank: 16, company: 'Allianz', revenues: '121,406.0', profits: '5,442.4' },
		    { rank: 17, company: 'Volkswagen', revenues: '118,376.6', profits: '1,391.7' },
		    { rank: 18, company: 'Fortis', revenues: '112,351.4', profits: '4,896.3' },
		    { rank: 19, company: 'Crédit Agricole', revenues: '110,764.6', profits: '7,434.3' },
		    { rank: 20, company: 'American Intl. Group', revenues: '108,905.0', profits: '10,477.0' }
		];

        var obj = {
            //editable: false,
            scrollModel: {autoFit: true},
            title: "Cell Comments",
            selectionModel: { type: 'cell' },            
            showBottom: false,            
            toolbar: { items: [
                { type: '<span>rowIndx: </span>' },
                { type: 'select', cls: 'sl_rowIndx', options: function (ui) {
                    var $grid = $(this).closest(".pq-grid");
                    var data = $grid.pqGrid("option", "dataModel.data"),
                        options = [];
                    for (var i = 0; i < data.length; i++) {
                        options.push(i);
                    }
                    return options;
                }
                },
                { type: '<span>dataIndx: </span>' },
                { type: 'select', cls: 'sl_dataIndx', options: function (ui) {
                    var CM = ui.colModel,
                        options = [];
                    for (var i = 0; i < CM.length; i++) {
                        options.push(CM[i].dataIndx);
                    }
                    return options;
                }
                },
                { type: '<span>Comments: </span>' },
                { type: '<textarea class="tb_comment"></textarea>', cls: 'tb_comment' },
                { type: 'button', label: 'Add', listeners: [{ 'click': function (ui) {
                    var $grid = $(this).closest(".pq-grid"),
                        rowIndx = $(".sl_rowIndx").val(),
                        dataIndx = $(".sl_dataIndx").val(),
                        comment = $(".tb_comment").val();
                    $grid.pqGrid('attr', { rowIndx: rowIndx, dataIndx: dataIndx, attr: { title: comment} });
                    $grid.pqGrid('refreshCell', { rowIndx: rowIndx, dataIndx: dataIndx });
                }
                }]
                },
                { type: 'button', label: 'Remove', listeners: [{ 'click': function (ui) {
                    var $grid = $(this).closest(".pq-grid"),
                        rowIndx = $(".sl_rowIndx").val(),
                        dataIndx = $(".sl_dataIndx").val();
                    $grid.pqGrid('removeAttr', { rowIndx: rowIndx, dataIndx: dataIndx, attr: 'title' });
                    $grid.pqGrid('refreshCell', { rowIndx: rowIndx, dataIndx: dataIndx });
                }
                }]
                }
            ]
            },
            columnTemplate: { render: commentRender },
            colModel: [{ title: "Rank", width: 100, dataType: "integer", dataIndx: "rank" },
                { title: "Company", width: 220, dataType: "string", dataIndx: "company" },
                { title: "Revenues ($ millions)", width: 180, dataType: "float", align: "right", dataIndx: "revenues" },
                { title: "Profits ($ millions)", width: 160, dataType: "float", align: "right", dataIndx: "profits" }
            ],
            dataModel: {
                data: data,
                location: "local",
                sorting: "local"
            },
            create: function (evt, ui) {
                $(this).pqTooltip();
            }
        };
        var $grid = $("#grid_row_styles").pqGrid(obj);
        $("#turn_virtual").click(function (evt) {
            if ($(this).is(":checked")) {
                obj.virtualX = true;
                obj.virtualY = true;
            }
            else {
                obj.virtualX = false;
                obj.virtualY = false;
            }
            $grid.pqGrid("destroy");
            $grid.pqGrid(obj);
        });
    });
        
</script>    
</head>
<body>

<input type="checkbox" id="turn_virtual"><label for="turn_virtual"> Turn on Virtualization</label>


<div id="grid_row_styles" style="margin:auto;"></div>

</body>

</html>
